<!-- eslint-disable vue/multi-word-component-names -->
<!-- eslint-disable-next-line vue/valid-template-root -->
<script setup>
import {
  ref,
  getCurrentInstance,
  onMounted,
  reactive
} from 'vue'
import SuperContent from '@/components/Layer/Note/SuperContent.vue'
import { Up1stWord } from '@/utils'
import router from '@/router'
import { delete_note } from '@/utils/api/note'
import { getBind } from '@/utils/api/image/bind'
import { emitter } from '@/utils'
import { AlexMsg } from '@2473o/alexui'
import { scrollTop } from '@/utils/index'
import { setNoteStatus } from '@/utils/api/note'

const app = getCurrentInstance()
const { dayjs } =
  app.appContext.app.config.globalProperties

const toNoteDetail = (id) => {
  const routeUrl = router.resolve({
    path: `/note/${id}`
  })
  window.open(routeUrl.href, '_blank')
}

const props = defineProps(['item'])
const viewer = reactive({
  images: [],
  index: 0,
  show: false
})

const handleQuote = (id) => {
  emitter.emit('use-Quote', id + ' ')
  scrollTop()
}
const showDialog = ref(false)
const handleDel = async () => {
  let res = await delete_note(props.item.id)
  if (res.code == 200) {
    AlexMsg({ type: 'error', text: '删除成功' })
    setTimeout(() => {
      window.location.reload()
    }, 1000)
  } else {
    AlexMsg({ type: 'error', text: res.msg })
  }
  showDialog.value = false
}

const setPrivate = async (id) => {
  let res = await setNoteStatus(id, 0)
  if (res.code == 200) {
    AlexMsg({ type: 'success', text: '设置成功' })
  } else {
    AlexMsg({ type: 'error', text: res.msg })
  }
}

onMounted(async () => {
  let images = await getBind(
    'note',
    props.item.id
  )
  viewer.images = images.map((o) => {
    if (!o.imgUrl.startsWith('http://')) {
      o.imgUrl = `/prod-api/${o.imgUrl}`
    }
    return o.imgUrl
  })
})
</script>

<template>
  <AlexDialog
    v-model:show="showDialog"
    :outsize-colse="true"
  >
    <template #header></template>
    <template #default>
      <div style="width: 15rem; min-height: 5rem">
        <div style="font-size: 1rem">
          是否删除？
        </div>
        <div
          style="
            display: flex;
            justify-content: space-between;
            margin-top: 1rem;
          "
        >
          <AlexBtn
            width="5rem"
            height="2rem"
            radius=".5rem"
            style="
              --alex-btn-bg: #e85600;
              color: #fff;
            "
            @click="handleDel"
            >确认</AlexBtn
          >
          <AlexBtn
            width="5rem"
            height="2rem"
            radius=".5rem"
            style="color: #fff"
            @click="showDialog = false"
            >取消</AlexBtn
          >
        </div>
      </div>
    </template>
  </AlexDialog>

  <div class="notes-item">
    <div class="tile d-block">
      <div
        class="tile-header flex-center justify-between"
      >
        <div
          class="article-header text-gray text-tiny d-flex align-center"
        >
          <div class="flex-center">
            <time class="mr-2">{{
              dayjs(item.updateTime).fromNow()
            }}</time>
          </div>
        </div>

        <div class="dropdown mr-1">
          <a
            href="javascript:void(0);"
            tabindex="0"
            class="btn btn-link btn-action btn-sm flex-center dropdown-toggle text-gray"
          >
            <i
              class="dashicons dashicons-ellipsis"
            ></i>
            ...
          </a>
          <ul
            class="menu menu-left uni-card uni-bg uni-shadow bg-blur"
            style="
              overflow: unset;
              min-width: 6rem;
            "
          >
            <!---->
            <div class="text-center">
              <li
                @click="showDialog = true"
                data-tooltip="删除"
                class="menu-item d-inline-block tooltip mt-0"
              >
                <a
                  href="javascript:void(0);"
                  class="align-center text-error"
                  style="display: flex"
                  ><i class="czs-trash-l"></i
                ></a>
              </li>
              <li
                @click="handleQuote(item.id)"
                data-tooltip="引用"
                class="menu-item d-inline-block tooltip mt-0"
              >
                <a
                  href="javascript:void(0);"
                  class="align-center"
                  style="display: flex"
                  ><i class="czs-bookmark-l"></i
                ></a>
              </li>
              <li
                data-tooltip="编辑"
                @click="
                  toNoteDetail(item.id, true)
                "
                class="menu-item d-inline-block tooltip mt-0 ml-1"
              >
                <a
                  href="javascript:void(0);"
                  class="align-center"
                  style="display: flex"
                  ><i class="czs-pen-write"></i
                ></a>
              </li>
            </div>
            <div class="divider my-2"></div>
            <li class="menu-item">
              <a
                href="javascript:void(0);"
                @click="setPrivate(item.id)"
                class="align-center"
                style="display: flex"
                ><i class="czs-lock-l mr-2"></i>
                私密
              </a>
            </li>
            <!-- <li class="menu-item text-error">
              <a href="javascript:void(0);" class="align-center" style="display: flex"
                ><i class="czs-box-l mr-2"></i> 归档
              </a>
            </li> -->
          </ul>
        </div>
      </div>
      <div class="tile-content p-0">
        <div class="flex-wrap d-flex">
          <SuperContent
            :content="item.content"
            :tags="item.tags"
          />
        </div>
      </div>

      <div
        class="notes-item-images flex-center justify-start"
      >
        <div
          v-for="(item, index) in viewer.images"
          :key="index"
          class="notes-item-images__item c-zoom-in"
        >
          <img
            @click="
              ViewImage.display(
                viewer.images,
                item
              )
            "
            :src="item"
            alt=""
            class="s-rounded"
          />
        </div>
      </div>

      <div
        class="tile-footer text-gray text-tiny flex-center justify-between"
      >
        <div class="flex-center">
          <button
            class="btn btn-link btn-sm text-gray mr-2 __btn"
            @click="toNoteDetail(item.id)"
          >
            详情
          </button>
          <!-- <button class="btn btn-link btn-sm text-gray mr-2" :class="{ 'text-error': item.praise }">
            <i class="czs-heart"></i> <span>113</span>
          </button> -->
        </div>
        <span class="flex-center"
          ><i
            class="dashicons dashicons-laptop mr-1"
          ></i>
          {{ $t('common.From') }}
          {{ Up1stWord(item.mark.os.name) }}
          {{ Up1stWord(item.mark.platform.type) }}
        </span>
      </div>
    </div>

    <div class="divider"></div>
  </div>
</template>

<style lang="scss" scoped>
.__btn {
  &:hover {
    color: #3366ff !important;
    box-shadow: 0 0 0 0.1rem
      rgba(51, 102, 255, 0.2) !important;
    background-color: rgba(
      51,
      102,
      255,
      0.1
    ) !important;
  }
}
</style>
